<template>
	<view class="page">
		<view class="box pd" style="margin-top: 1rem;">
			<view class="content-text">{{address.location}}{{address.street}}</view>
			<view class="contenx">
				{{address.location}}
			</view>
		</view>
		<view class="box pd flex-container" style="margin: 1rem auto;">
			<image style="width: 30%; height: 6rem;" :src="wine.imageUrl" mode="widthFix"></image>
			<view style="margin-left: 1rem;width: 70%;">
				<view style="font-size: 1.3rem;">
					{{wine.wname}}
				</view>
				<view style="margin-top: 1.3rem;height: 1.5rem;">

				</view>
				<view class="flex-container j-sbe">
					<text>${{wine.price}}</text>
					<u-number-box :step="1" v-model="num" @minus="decreaseAmount" @plus="increaseAmount"></u-number-box>
				</view>
			</view>
		</view>
		<view class="box pd">
			<view class="">
				预约人:{{userInfo.username}}
			</view>
			<view style="margin: 0.6rem auto;">

			</view>
			<uni-icons type="phone"></uni-icons>
			<text style="color:#7a7a7a">{{userInfo.phoneNumber}}</text>
		</view>
		<button class="btn" type="warn" @click="goadder">确定申购</button>

		<u-toast ref="uToast"></u-toast>

		<u-modal cancelText="继续申购" confirmText="查看详情" :content="content" :show="tishi" showCancelButton
			closeOnClickOverlay @confirm="godefuet" @cancel="defcancel" @close="defclose"></u-modal>
	</view>

</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				address: {},
				wineId: null,
				wine: {},
				num: 1,
				tishi: false,
				content: "",
				recode: ""
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			}
		},
		onLoad(val) {
			this.wineId = Number(val.wineId)
		},
		created() {
			this.getByStatus()
			this.loadData()
		},
		methods: {
			decreaseAmount() {
				if (this.num > 0) {
					this.num--;
				}
			},
			increaseAmount() {
				this.num++;
			},
			goadder() {
				this.creact()
			},
			async loadData() {
				const param = {
					wineId: this.wineId
				}
				const res = await this.$request.get('/system/wine/WineByKey', param)

				if (res.code == 200) {
					this.wine = res.data.w
					console.log(this.wine);
				}
			},
			getRevenDate() {
				const date = new Date(); // 将日期字符串转换为 Date 对象
				const month = date.getMonth() + 1; // 获取当前月份（注意：月份是从 0 开始计数的）
				const day = date.getDate(); // 获取当前日期
				let nextMonthFirstDay;
								
				// 判断是否为当前月的最后一天
				if (day === new Date(date.getFullYear(), month, 0).getDate()) {
				    // 如果是最后一天，获取下个月的第一天
				    nextMonthFirstDay = new Date(date.getFullYear(), month, 1);
				} else {
				    // 如果不是最后一天，获取当前月的下一天
				    nextMonthFirstDay = new Date(date.getFullYear(), month - 1, day + 1);
				}
								
				// 格式化输出日期
				const nextMonth = nextMonthFirstDay.getMonth() + 1;
				const nextDay = nextMonthFirstDay.getDate();
				return `${nextMonth}月${nextDay}日`;
				
			},
			async getByStatus() {

				const param = {
					userId: this.userId
				}
				const res = await this.$request.get('/system/address/getByDefault', param)
				console.log(res);
				if (res.code === 200) {

					this.address = res.data.address
				} else {

				}
			},
			handleClick(action, wineId, promotionId) {

				// 检查用户是否已登录
				if (!this.checkToken()) {
					// 如果用户未登录，则不执行后续操作
					return;
				}

				// 如果已登录，则根据不同的操作执行相应的操作
				switch (action) {
					case 'handleReservation':
						this.handleReservation();
						break;
					default:
						break;
				}
			},
			async loadData() {
				const param = {
					wineId: this.wineId
				}
				const res = await this.$request.get('/system/wine/WineByKey', param)
				console.log(res);
				if (res.code == 200) {
					this.wine = res.data.w
				}
			},
			// 创建预约
			creact() {
				this.$refs.uToast.show({
					type: 'loading',
					title: '提交中...',
					message: "提交中...",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				})
				const param = {
					wineId: this.wineId,
					price: this.wine.price * this.num,
					userId: this.userId,
					quantity: this.num
				}
				this.$request.post('/system/wine-reservation/invest', JSON.stringify(param))
					.then(res => {
						if (res.code === 200) {
							this.recode = res.data.data
							this.tishi = true
							this.content=`申请完成,请在${this.getRevenDate()}18:00查看预约结果`
						} else {
							this.$refs.uToast.show({
								type: 'error',
								title: '失败主题',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
							});
						}
					})
					.catch(error => {})
			},
			godefuet() {
				uni.navigateTo({
					url: `/pages/tabBar/yuyue/details/result/defail?code=${this.recode}`
				})
			},
			defclose() {
				this.tishi = false
			},
			defcancel() {
				this.tishi = false
				uni.switchTab({
					url: "/pages/tabBar/yuyue/yuyue"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pd {
		padding: 0.5rem;
	}


	.contenx {
		font-size: 0.9rem;
		color: #737373;
	}

	.content-text {
		font-size: 17px;
	}

	.btn {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.box-title {
		width: 100%;
		display: flex;
		justify-content: space-between;

		i {
			width: 0.24rem;
			height: 0.6rem;
		}
	}

	.input-row {
		display: flex;
		justify-content: space-between;
	}

	.zifu {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>